<template>
    <div class="tc-excelTemplate">
        <section class="tc-excelTemplate-title">
            <div>
                建议先 <el-button type="primary" @click="downloadFile(excelData)">下载模板</el-button> 填写模板完毕,在导入模板内容
                <el-button type="primary" @click="uploadFile()">导入文件</el-button>
                <input
                type="file"
                @change="importFile(this)"
                id="imFile"
                style="display: none"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
                <a id="downlink"></a>
                <el-button class="button">导出</el-button>
                <el-button class="r">删除</el-button>
            </div>
        </section>

        <section class="tc-excelTemplate-table">
            <el-table :data="excelData" max-height="500px" stripe style="width: 100%" v-loading="fullscreenLoading">
                <el-table-column v-for="(item, index) in excelHeader" :key="index" :label="item.label" :prop="item.prop" show-overflow-tooltip></el-table-column>
            </el-table>
        </section>
    </div>
</template>

<script>
var XLSX = require('xlsx')
import demoData from './excelJson/demo'

export default {
    name: "excelTemplate",
    data(){
        return{
            fullscreenLoading: false, // 加载中
            imFile: {}, // 导入文件el
            outFile: {}, // 导出文件el
            errorDialog: false, // 错误信息弹窗
            errorMsg: '', // 错误信息内容
            excelData: [
                {
                    name: '泡芙', size: '500g', taste: '酸奶', price: '30', remain: '56'
                }
            ],
            excelHeader: []
        }
    },
    created(){
        this.excelHeader = demoData.data
        this.initData()
    },
    mounted() {
        this.imFile = document.getElementById('imFile')
        this.outFile = document.getElementById('downlink')
    },
    props:{
    },
    methods:{
        uploadFile: function () { // 点击导入按钮
            this.imFile.click()
        },
        downloadFile: function (rs) { // 点击导出按钮
            let data = [{}]
            for (let k in rs[0]) {
                this.excelHeader.forEach((v, i) => {
                    // 获取表头
                    if (v.prop === k) {
                        data[0][k] = v.label
                    }
                })
            }
            data = data.concat(rs)
            this.downloadExl(data, demoData.fileName)
        },
        importFile: function () { // 导入excel
            this.fullscreenLoading = true
            let obj = this.imFile
            if (!obj.files) {
                this.fullscreenLoading = false
                return
            }
            var f = obj.files[0]
            var reader = new FileReader()
            let _this = this
            reader.onload = function (e) {
                var data = e.target.result
                if (_this.rABS) {
                _this.wb = XLSX.read(btoa(this.fixdata(data)), { // 手动转化
                    type: 'base64'
                })
                } else {
                _this.wb = XLSX.read(data, {
                    type: 'binary'
                })
                }
                let json = XLSX.utils.sheet_to_json(_this.wb.Sheets[_this.wb.SheetNames[0]])
                console.log(typeof json)
                _this.dealFile(_this.analyzeData(json)) // analyzeData: 解析导入数据
            }
            if (this.rABS) {
                reader.readAsArrayBuffer(f)
            } else {
                reader.readAsBinaryString(f)
            }
        },
        downloadExl: function (json, downName, type) { // 导出到excel
        let keyMap = [] // 获取键
        for (let k in json[0]) {
            keyMap.push(k)
        }
        console.info('keyMap', keyMap, json)
        let tmpdata = [] // 用来保存转换好的json
        json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
            v: v[k],
            position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
        }))).reduce((prev, next) => prev.concat(next)).forEach(function (v) {
            tmpdata[v.position] = {
            v: v.v
            }
        })
        let outputPos = Object.keys(tmpdata) // 设置区域,比如表格从A1到D10
        let tmpWB = {
            SheetNames: ['mySheet'], // 保存的表标题
            Sheets: {
            'mySheet': Object.assign({},
                tmpdata, // 内容
                {
                '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] // 设置填充区域
                })
            }
        }
        let tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB,
            {bookType: (type === undefined ? 'xlsx' : type), bookSST: false, type: 'binary'} // 这里的数据是用来定义导出的格式类型
        ))], {
            type: ''
        }) // 创建二进制对象写入转换好的字节流
        var href = URL.createObjectURL(tmpDown) // 创建对象超链接
        this.outFile.download = downName + '.xlsx' // 下载名称
        this.outFile.href = href // 绑定a标签
        this.outFile.click() // 模拟点击实现下载
        setTimeout(function () { // 延时释放
            URL.revokeObjectURL(tmpDown) // 用URL.revokeObjectURL()来释放这个object URL
        }, 100)
        },
        analyzeData: function (data) { // 此处可以解析导入数据
        return data
        },
        dealFile: function (data) { // 处理导入的数据
            console.log(data[0], '处理导入的数据')
            this.imFile.value = ''
            this.fullscreenLoading = false
            if (data.length <= 0) {
                this.errorDialog = true
                this.errorMsg = '请导入正确信息'
            } else {
                console.log(data)
                this.excelData = data.map(item => {
                    const arrItem = {}
                    //将excel文件的标题名称转换，将数据格式转换成数组显示格式
                    for (let key in item) {
                        this.excelHeader.forEach((v, i) => {
                            // 根据表头去设置数据
                            if (v.label == key) {
                                arrItem[v.prop] = item[key]
                            }
                        })
                    }
                    return arrItem
                })
            }
        },
        s2ab: function (s) { // 字符串转字符流
            var buf = new ArrayBuffer(s.length)
            var view = new Uint8Array(buf)
            for (var i = 0; i !== s.length; ++i) {
                view[i] = s.charCodeAt(i) & 0xFF
            }
            return buf
            },
            getCharCol: function (n) { // 将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。
            let s = ''
            let m = 0
            while (n > 0) {
                m = n % 26 + 1
                s = String.fromCharCode(m + 64) + s
                n = (n - m) / 26
            }
            return s
            },
            fixdata: function (data) { // 文件流转BinaryString
            var o = ''
            var l = 0
            var w = 10240
            for (; l < data.byteLength / w; ++l) {
                o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
            }
            o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
            return o
        },
        initData() {
            var self = this
            $(document).ready(function(){
                $(document.body).bind({
                    paste: function(e) {
                        if (window.clipboardData) {
                            return ;
                        }
                        var clipboardData = e.originalEvent.clipboardData;
                        processData(clipboardData);
                    }
                });
                
                document.onkeyup = function(e) {
                    if (window.clipboardData) {
                        e = window.event || e;
                        var keyCode = e.keyCode || e.which || e.charCode;
                        var ctrlKey = e.ctrlKey || e.metaKey;
                        if (ctrlKey && keyCode == 86) {
                            var clipboardData = window.clipboardData;
                            processData(clipboardData);
                        }
                    }
                    return false;
                }
        
                var processData = function(clipboardData) {
                    $('table#dgBudget>tbody>tr.datarow').remove();
                    var data = clipboardData.getData('Text').split('\n');
                    var dataHtml = '';
                    var keys = []
                    demoData.data.forEach((v, i) => {
                        keys.push(v.prop)
                    })
                    for (var i = 0; i < data.length; i++) {
                        if (!data[i]) {
                            continue ;
                        }
                        var bugdetData = data[i].split('\t');
                        var item = {}
                        if (bugdetData.length > 0) {
                            keys.forEach((v, i) => {
                                item[v] = bugdetData[i]
                            })
                        }
                        self.excelData.push(item)
                    }
                };
            })
        }
  
    }
}
</script>

<style lang="scss">
@import './index.scss';
@import '../../../static/css/spinkit.css';
</style>
